<template>
<ul>
  <li v-for="item in obj" :key="item.id">
    {{item.id}} - {{item.name}}
  </li>
  <button @click="getNewObj">newObj</button>
</ul>
</template>

<script>
import { customRef } from 'vue';

function fetchRef(value) {
  return customRef((track, trigger) => {
    // 用于存储获得的数据
    let ans;
    function getAns() {
      fetch(value)
        .then((res) => {
          return res.json();
        }).then((data) => {
          console.log(data);
          // 将获得的数据存储起来
          ans = data;
          // 提示触发视图层变化
          trigger();
        }).catch((err) => {
          console.log(err);
        });
    }
    getAns();
    return {
      get() {
        track();
        return ans;
      },
      set(newValue) {
        value = newValue;
        // 修改 value 的同时再次进行数据的抓取
        getAns();
      }
    }
  })
}

export default {
  name: 'App',
  setup() {
    const obj = fetchRef('../public/data.json');

    // 修改数据源
    function getNewObj() {
      obj.value = '../public/data1.json';
    }
    return {
      obj,
      getNewObj
    };
  }
}
</script>